<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
 
import { reactive,onMounted } from "vue";
 
import { shallowRef } from "@vue/reactivity";
 
const map = shallowRef(null);//地图面板
 
const Map = reactive({
  myMap: {}, //把AMap中的方法保存在浏览器
  lng:"",
  lat:""
});
 
//
const initMap = () => {
  AMapLoader.load({
    key: "你的key", // 申请Web端开发者Key
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [
      "AMap.Driving",
    ], // 需要使用的的插件列表,此处以驾车为例子
  }).then((AMap) => {
    Map.myMap = AMap;//保存获取到的方法
    //初始化地图房源地图
    map.value = new AMap.Map("container", //绑定container
{
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      resizeEnable: true,
      viewMode: "3D", //是否为3D地图模式
      zoom: 16, //初始化地图级别
      //center: [Map.lng, Map.lat], //初始化地图中心点位置
     // zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
    });
  });
};
 
//汽车导航路线规划
function getDriving() {
  console.log("我是汽车导航");
  Driving = new Map.myMap.Driving({
    map: map.value, //地图
    hideMarkers: false,  //自定义起点终点图标,默认false
    policy: Map.myMap.DrivingPolicy.LEAST_TIME,//驾车策略,可选择最快,最经济,最近
  });
 
//传入起点坐标,终点坐标,也可以添加图经点
  Driving.search(
    [lng, lat],//起点坐标,可通过上面getGeolocation()获取
    [lng, lat],//终点坐标,服务器获取终点,也可自己设置
  );
}
</script>
 
 
 
<template>
<div id="container">
</div>
</template>